<template>
  <div class="awardRedemption hideScrollBar">
    <!-- 导航 -->
    <NavBar :title="t('lotteryMoney.jjbdmx')" isFixed />
    <div class="contentview">
      <div
        v-if="!pageData.loading && pageData.list.length === 0"
        class="contentview-notdata items-center"
      >
        <img class="contentview-notdata-img" src="/image/notdate-icon.png" />
        <div class="contentview-notdata-desc">{{ t("mvp.other.zwnr") }}</div>
      </div>
      <ClientOnly v-else>
        <van-list
          v-model:loading="pageData.loading"
          :finished="pageData.finished"
          :finished-text="t('mvp.other.text4')"
          :loading-text="t('mvp.other.text11')"
          @load="onLoadList"
        >
          <div
            class="item items-center"
            v-for="(item, index) in pageData.list"
            :key="item.id"
          >
            <img
              v-if="item.winnerType == 6 || item.winnerType == 7"
              class="item-left"
              src="/image/lotterymoney/winning-icon.svg"
            />
            <img
              v-else-if="item.winnerType != 1"
              class="item-left"
              src="/image/lotterymoney/bonus-icon.svg"
            />
            <img
              v-else
              class="item-left"
              src="/image/lotterymoney/winning-icon.svg"
            />
            <div class="item-right">
              <!-- 兑奖 -->
              <template
                v-if="
                  item.winnerType != 1 &&
                  item.winnerType != 2 &&
                  item.winnerType != 6 &&
                  item.winnerType != 7
                "
              >
                <div
                  class="items-center"
                  style="justify-content: space-between; margin-bottom: 7px"
                >
                  <div class="item-right-title">{{ item.title }}</div>
                  <div
                    class="item-right-money"
                    :class="{
                      'item-right-money-add': !item.prizeAmount.includes('-'),
                    }"
                  >
                    {{ !item.prizeAmount.includes("-") ? "+" : "-" }}${{
                      toThousands(
                        decimalToLength(item.prizeAmount.replace("-", ""))
                      )
                    }}
                  </div>
                </div>
              </template>
              <!-- 队伍分红/ 幸运/超级 大赢家 -->
              <template v-else>
                <div
                  class="items-center"
                  style="justify-content: space-between; margin-bottom: 7px"
                >
                  <div class="items-center">
                    <!--标题 -->
                    <div class="item-right-title">{{ item.title }}</div>
                    <div
                      style="
                        background-color: rgba(115, 119, 128, 0.15);
                        width: 1px;
                        height: 12px;
                        margin: 0 4px;
                      "
                    ></div>
                    <!-- 期数 -->
                    <div class="item-right-qs">
                      {{
                        formatWithTimeZone(
                          item.sessionTime,
                          "Asia/Jakarta",
                          "en-US"
                        )
                      }}
                    </div>
                    <!-- 标签 -->
                    <template v-if="item.sessionId == item.periodId">
                      <img
                        v-if="globalStore.$state.language == 'VI'"
                        class="item-right-tag"
                        src="/image/lotterymoney/super-icon1.svg"
                      />
                      <img
                        v-else-if="globalStore.$state.language == 'pt'"
                        class="item-right-tag"
                        src="/image/lotterymoney/super-icon.svg"
                      />
                      <img
                        v-else
                        class="item-right-tag"
                        src="/image/lotterymoney/super-icon2.svg"
                      />
                    </template>
                  </div>
                  <div
                    class="item-right-money"
                    :class="{
                      'item-right-money-add': !item.prizeAmount.includes('-'),
                    }"
                  >
                    {{ !item.prizeAmount.includes("-") ? "+" : "-" }}${{
                      toThousands(decimalToLength(item.prizeAmount))
                    }}
                  </div>
                </div>
              </template>
              <!-- 兑奖/中奖 时间 -->
              <div class="items-center" style="justify-content: space-between">
                <div class="item-right-time">
                  {{ item.sendTime }}
                </div>
                <div class="item-right-bdc">
                  ={{
                    toThousands(
                      decimalToLength(
                        Math.abs(Number(item.prizeAmount)) * 1000,
                        0
                      )
                    )
                  }}
                  BDC
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </ClientOnly>
    </div>
  </div>
</template>
<script setup name="awardRedemption">
import { useDateFormat } from "@vueuse/core";
import { getPrizeChangeRecord } from "../../api/lottery";
import { getArticleList } from "../../api/bdc";
import { getOssFileUrl, toThousands, decimalToLength } from "@/utils";
import { useGlobalStore } from "~~/store/global";

const globalStore = useGlobalStore();
const { t } = useI18n();
// const route = useRoute();
// console.log("页面参数:", route.query);
// firebase埋点
const firebase = useInitFirebase(); // 初始化firebase
// 桥接
// bridge.hideToolbar(); // 调用原生app的函数
// 页面属性
const pageData = reactive({
  loading: false,
  finished: false,
  list: [],
  pageNum: 1, // 后端:不能超过50
  total: 0,
});
// 上啦加载
const onLoadList = () => {
  pageData.pageNum += 1;
  getPrizeChangeRecordRequest((isAdd) => {
    if (!isAdd) {
      pageData.pageNum -= 1;
    }
  });
};
// 获取列表数据
const getPrizeChangeRecordRequest = async (call) => {
  pageData.loading = true;
  const res = await getPrizeChangeRecord({
    pageNum: pageData.pageNum,
    pageSize: 20, // 后端:不能超过100
  });
  // console.log("明细:", res);
  pageData.loading = false;
  if (res) {
    let majorList = [];
    // winnerType 1:个人大奖 2:队伍分红 3:奖金兑换 4:奖金兑换失败 5:过期记录 6:新版超级抽奖-一等奖 7:新版超级抽奖-二等奖  8:邀友奖励额度
    majorList = res.records.map((e, index) => {
      if (e.winnerType == 1) {
        if (e.sessionId == e.periodId) {
          e.title = t("lotteryMoney.cjdyj");
        } else {
          e.title = t("lotteryMoney.xydyj");
        }
      } else if (e.winnerType == 2) {
        e.title = t("lotteryMoney.dwfhjl");
      } else if (e.winnerType == 3) {
        e.title = t("lotteryMoney.jjdh");
      } else if (e.winnerType == 4) {
        e.title = t("lotteryMoney.jjdhsb");
      } else if (e.winnerType == 5) {
        e.title = t("lotteryMoney.jjgq");
      } else if (e.winnerType == 6) {
        e.title = t("lotteryMoney.ydj");
      } else if (e.winnerType == 7) {
        e.title = t("lotteryMoney.edj");
      } else if (e.winnerType == 8) {
        e.title = t("lotteryMoney.yyjled");
      }

      // 中奖时间-兑换时间
      e.sendTime = useDateFormat(
        Number(e.sendTime),
        "YYYY-MM-DD HH:mm:ss"
      ).value;

      return e;
    });

    pageData.list = pageData.list.concat(majorList);

    pageData.total = res.total || 0;
    if (pageData.list.length >= res.total || 0) {
      pageData.finished = true;
    }
    if (res.records && res.records.length > 0) {
      call && call(true);
    } else {
      call && call(false);
    }
  } else {
    call && call(false);
  }
};

onMounted(() => {
  firebase?.logEvent("BDC_H5_Award-Redemption_PUV");
  getPrizeChangeRecordRequest();
});

// 期数格式化
const formatWithTimeZone = (date, timeZone, locale) => {
  const yearFormatter = new Intl.DateTimeFormat("en-US", {
    year: "numeric",
    timeZone: timeZone,
  });
  const monthFormatter = new Intl.DateTimeFormat("en-US", {
    month: "numeric",
    timeZone: timeZone,
  });
  const dayFormatter = new Intl.DateTimeFormat("en-US", {
    day: "numeric",
    timeZone: timeZone,
  });
  const year = yearFormatter.format(new Date(Number(date)));
  const month = monthFormatter.format(new Date(Number(date)));
  const day = dayFormatter.format(new Date(Number(date)));

  return `${year}.${month}.${day}`;
};
</script>
<style lang="scss" scoped>
.item {
  margin: 15 * 2px;
  padding-bottom: 15 * 2px;
  border-bottom: 2px solid rgba(115, 119, 128, 0.15);
  &-left {
    width: 36 * 2px;
    height: 36 * 2px;
    overflow: hidden;
    margin-right: 10 * 2px;
  }
  &-right {
    flex: 1;
    &-title {
      font-size: 14 * 2px;
      color: #141924;
      font-weight: 510;
    }
    &-money {
      font-size: 14 * 2px;
      color: #ff4040;
      font-weight: 600;
      &-add {
        color: #007bff;
      }
    }
    &-tag {
      margin-left: 6 * 2px;
      height: 15 * 2px;
    }
    &-qs {
      font-size: 11 * 2px;
      color: #141924;
      font-weight: 590;
    }
    &-time {
      flex: 1;
      font-size: 12 * 2px;
      color: #999da7;
      word-break: break-word;
    }
    &-bdc {
      font-size: 12 * 2px;
      color: #999da7;
    }
  }
}

.awardRedemption {
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  .contentview {
    &-notdata {
      justify-content: center;
      flex-direction: column;
      position: relative;
      top: 120 * 2px;
      &-img {
        width: 200 * 2px;
        height: 200 * 2px;
        margin-bottom: 5px;
      }
      &-desc {
        color: #999da7;
        font-size: 13 * 2px;
      }
    }
  }
}
</style>
